<template>
  <div></div>
</template>
<script>
import { getList } from "network/mock.js";

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart, LineChart } from "echarts/charts";
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  ToolboxComponent,
} from "echarts/components";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  ToolboxComponent,
  BarChart,
  LineChart,
  CanvasRenderer,
]);
export default {
  props: ["bar"],
  data() {
    return {
      chart: null,
      barC: null,
      res: null,
    };
  },
  watch: {
    bar: function(newValue) {
      this.barC = newValue;
      newValue &&
        this.getBarChart(() => {
          this.init();
        });
    },
  },
  mounted() {},
  methods: {
    // 请求数据
    async getBarChart(callback) {
      let { list } = await getList();
      this.res = list.find((r) => r.type === "RightMidEchart");
      console.log(this.res);
      callback && callback();
    },

    // 初始化
    init() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.barC);
      // 声明颜色数组
      myChart.setOption({
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "0%",
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12",
          },
          data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
        },

        grid: {
          left: "10",
          top: "30",
          right: "10",
          bottom: "10",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            // x轴更换数据
            data: [
              "01",
              "02",
              "03",
              "04",
              "05",
              "06",
              "07",
              "08",
              "09",
              "10",
              "11",
              "12",
              "13",
              "14",
              "15",
              "16",
              "17",
              "18",
              "19",
              "20",
              "21",
              "22",
              "23",
              "24",
              "25",
              "26",
              "26",
              "28",
              "29",
              "30",
            ],
            // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12,
              },
            },
            // x轴线的颜色为   rgba(255,255,255,.2)
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.2)",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12,
              },
            },
            // 修改分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            name: "男",
            type: "line",
            smooth: true,
            // 下面的填充颜色
            areaStyle: {
              // 渐变色，只需要复制即可
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(1, 132, 213, 0.4)", // 渐变色的起始颜色
                  },
                  {
                    offset: 0.8,
                    color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
            // 单独修改线条的样式
            lineStyle: {
              color: "#0184d5",
              width: 2,
            },
            // 设置拐点
            symbol: "circle",
            // 设置拐点大小
            symbolSize: "8",
            // 设置拐点颜色以及边框
            itemStyle: {
              color: "#0184d5",
              borderColor: "rgba(221, 220, 107, .2)",
              borderWidth: 12,
            },
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            // series  第一个对象data数据
            data: this.res.data1,
          },
          {
            name: "女",
            type: "line",
            smooth: true,
            // 下面的填充颜色
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0, 216, 135, 0.4)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(0, 216, 135, 0.1)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
              },
            },
            // 单独修改线条的样式
            lineStyle: {
              normal: {
                color: "#00d887",
                width: 2,
              },
            },
            // 设置拐点
            symbol: "circle",
            // 设置拐点大小
            symbolSize: "8",
            // 设置拐点颜色以及边框
            itemStyle: {
              color: "#0184d5",
              borderColor: "rgba(221, 220, 107, .2)",
              borderWidth: 12,
            },
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            // series  第二个对象data数据
            data: this.res.data2,
          },
        ],
      });
      // 设置图表的自动适应
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
  },
};
</script>
<style scoped lang="scss"></style>
